//  访客数据 - 柱状图
import { ref } from "vue";
import { graphic } from "echarts/core";
import { slcieData, compitedMax } from '@/utils/tools'
import { setFontSize, listenResize } from '@/utils/px_rem';

const option = ref({}) as any;

function initCharts(names: any = [], waterMeters: any = [], energyMeters: any = []) {
  if (names.length === 0) {
    option.value = {};
    return;
  }



  const waterMax: any = compitedMax(waterMeters);
  const energyMax: any = compitedMax(energyMeters);

  option.value = {
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
      textStyle: {
        color: "#fff",
      },
      borderColor: "transparent",//设置自定义边框颜色
      backgroundColor: "transparent", //设置背景颜色
      confine: true,
      formatter: params => {
        let str = '';
        const [hsl, hdl] = params;

        if (hdl && hsl) {
          str = `
          <div style="position: relative; top: 0; left: 0; margin: 0; line-height: normal !important; padding-left: ${setFontSize(15)}px; width: ${setFontSize(191)}px; height: ${setFontSize(83)}px; border: ${setFontSize(1)}px solid #2FAFFF; box-sizing: border-box; box-shadow: 0px 0px ${setFontSize(10)}px #3e95ff;">
            <div class="title" style="position: absolute; top: ${setFontSize(-10)}px;; left: ${setFontSize(10)}px; margin-top: ${setFontSize(8)}px; font-size: ${setFontSize(16)}px; background: linear-gradient(180deg,#e8f3ff 32%, #4ca8ff);  -webkit-background-clip: text;
  background-clip: text; color: transparent; -webkit-text-fill-color: transparent;">
              <span>${hsl.name}</span>
            </div>
            <div class="list" style="position: absolute; top: ${setFontSize(16)}px; left: ${setFontSize(10)}px;">
              <div class="item" style="display: flex; align-items: center; margin-top: ${setFontSize(4)}px;">
                <div class="circle" style="width: ${setFontSize(8)}px;height: ${setFontSize(8)}px;background: #1cbfff; border-radius: 50%;"></div>
                <div class="name" style="font-size: ${setFontSize(14)}px; margin-left: ${setFontSize(6)}px;">耗水量</div>
                <div class="msg" style="display: flex; align-items: end;">
                  <div class="num" style="font-size: ${setFontSize(18)}px; margin-left: ${setFontSize(10)}px;">${hsl.value || 0}</div>
                  <div class="text" style="font-size: ${setFontSize(12)}px; color: #ddd; margin-left: ${setFontSize(4)}px;">吨</div>
                </div>
              </div>

              <div class="item" style="display: flex; align-items: center;">
                <div class="circle" style="width: ${setFontSize(8)}px;height: ${setFontSize(8)}px;background: #1cbfff; border-radius: 50%;"></div>
                 <div class="name" style="font-size: ${setFontSize(14)}px; margin-left: ${setFontSize(6)}px;">耗电量</div>
                <div class="msg" style="display: flex; align-items: end;">
                  <div class="num" style="font-size: ${setFontSize(18)}px; margin-left: ${setFontSize(10)}px;">${hdl.value|| 0}</div>
                  <div class="text" style="font-size: ${setFontSize(12)}px; color: #ddd; margin-left: ${setFontSize(4)}px;">千瓦</div>
                </div>
              </div>
            </div>
          </div>
          `;
        }
        return str;
      }
    },
    grid: {
      top: "28%",
      left: "6%",
      right: "2%",
      bottom: "4%",
      containLabel: true,
    },
    legend: {
      orient: 'horizontal', // 设置图例的排列方式为水平
      left: 'center', // 水平居中
      itemHeight: setFontSize(14),
      itemWidth: setFontSize(14),
      itemGap: setFontSize(16),
      color: ['#1CBFFF', '#1CFFD9'],
      data: [
        { name: '耗电量', icon: 'path://M65.95584 66.06848v891.91936h892.032V66.06848H65.95584z' },
        { name: '耗水量', icon: 'path://M65.95584 66.06848v891.91936h892.032V66.06848H65.95584z' }
      ],
      textStyle: {
        fontSize: setFontSize(16),
        color: "#fff",
        padding: [0, setFontSize(20), 0, setFontSize(6)],
      },
    },
    xAxis: [
      {
        type: "category",
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          textStyle: {
            fontSize: setFontSize(14),
            color: "#fff",
            lineHeight: setFontSize(16),
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ffffff",
          },
        },
        data: names,
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位：吨",
        min: 0,
        max: waterMax,
        splitNumber: 5,
        nameTextStyle: {
          color: "#ccc",
          fontSize: setFontSize(14),
          align: "center",
          padding: [0, setFontSize(10), setFontSize(5), 0],
        },
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: setFontSize(14),
            color: "#fff",
            lineHeight: setFontSize(16),
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(28, 130, 197, .3)",
            type: "dashed",
          },
        },
      },
      {
        name: "单位：千瓦",
        min: 0,
        max: energyMax,
        splitNumber: setFontSize(5),
        type: "value",
        nameTextStyle: {
          color: "#ccc",
          fontSize: setFontSize(14),
          align: "center",
          padding: [0, setFontSize(20), setFontSize(5), 0],
        },
        axisLabel: {
          show: true,
          fontSize: setFontSize(14),
          color: "#fff",
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "耗水量",
        type: "bar",
        stack: "总量",
        barMaxWidth: setFontSize(12),
        barGap: "10%",
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#1CFFD9",
            },
            {
              offset: 1,
              color: "rgba(15, 216, 255, 0.2)",
            },
          ]),
          opacity: .7,
        },
        data: waterMeters,
      },
      {
        name: "耗电量",
        yAxisIndex: 1,
        type: "line",
        showSymbol: false,
        symbol: "circle",
        smooth: true,
        symbolSize: setFontSize(6),
        lineStyle: {
          normal: {
            width: setFontSize(2),
            color: "#278BE8",
            shadowColor: '#278BE8',
            shadowBlur: setFontSize(8),
            shadowOffsetY: setFontSize(4),
            shadowOffsetX: 0,
          },
        },
        itemStyle: {
          color: "#1BC7FF",
          borderColor: "rgba(27, 199, 255, 0.30)",
          borderWidth: 6,
          shadowColor: "rgba(27, 199, 255, 0.5)",
          shadowBlur: 6,
          opacity: 1,
        },
        label: {
          show: false,
          position: "top",
          formatter: "{c}%",
          textStyle: {
            fontSize: setFontSize(14),
            color: "#fff",
          },
        },
        data: energyMeters, // 折线图的数据
      },
    ],
  };

}

let t: any = null;
function setOption(data: any = []) {
  openAnimation(data);
}

function openAnimation(data: any = [], step: any = 6) {
  let names: any = [];
  let energyMeters: any = []; //  电
  let waterMeters: any = [];  //  水;

  data.forEach((item: any) => {
    names.push(item.recordDate.slice(5));
    energyMeters.push(parseFloat(item.energyMeter / 1000 + '').toFixed(2));
    waterMeters.push(item.waterMeter);
  });

  let start: any = 0;
  let end: any = step;

  const callback: any = formatData(names, waterMeters, energyMeters);

  // 默认执行
  callback(start, end);

  if (t) clearInterval(t);

  if (names.length > step) {
    t = setInterval(() => {
      start += 1;
      end += 1;
      if (end > names.length) {
        start = 0;
        end = step;
      }
      callback(start, end);
    }, 3000);
  }

  listenResize(() => callback(start, end));
}

function formatData(names: any = [], watcher: any = [], energy: any = []) {
  return (start: any = 0, end: any = 6) => {
    const curNames: any = slcieData(names, start, end);
    const curWatcher: any = slcieData(watcher, start, end);
    const curEnergy: any = slcieData(energy, start, end);

    initCharts(curNames, curWatcher, curEnergy);
  }

}

export default function useOption(): any[] {
  return [option, setOption];
}

